<template>
    <div id="mainContent">
        <!-- 周检管理 -->
        <el-card class="box-card" style="margin-right:15px;">
            <el-row class="searchBox">
                <el-form size="small" label-width="200px">
                    <el-form-item label="系统自动下发周检通知：">
                        <el-switch v-model="note" active-color="#409EFF" inactive-color="#ff4949" @change="changNote"></el-switch>
                        <span>{{ isOn }}</span>
                    </el-form-item>
                    <el-form-item label="通知下发时间：">
                        <el-date-picker v-model="notedate" type="date" placeholder="选择日期"></el-date-picker>&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-checkbox v-model="checked">是否是本月</el-checkbox>&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-button size="small" type="primary" @click="setNoteDate">设置</el-button>
                    </el-form-item>
                    <el-form-item label="通知下发账号：">
                        <el-input size="small" v-model="account" disabled style="width: 220px;"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-button size="small" type="primary" @click="setUser">设置</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <el-col :span="24" style="margin-left: 90px;" class="searchBox">
                    <el-button type="primary" plain @click="tableRegister">登记报告人员逻辑表</el-button>
                </el-col>
                <el-col :span="24" style="margin-left: 90px;">
                    <el-button type="primary" plain @click="tableReceive">接收周检通知人员表</el-button>
                </el-col>
            </el-row>

            <!-- 设置下发账户 -->
            <choose-user :show.sync="showUser" @chooseAccount="chooseAccount"></choose-user>
            <!-- 登记报告人员逻辑表 -->
            <register-report :show.sync="showRegister"></register-report>
            <!-- 接受周检人员记录表 -->
            <receive-check :show.sync="showReceive"></receive-check>

        </el-card>
    </div>
</template>

<script>
    import JtTableColumnFilter from 'components/jt-table-column-filter/index';    // 导入表格列筛选组件
    import ChooseUser from 'dialog/system-manage/week-check-manage/choose-user';
    import RegisterReport from 'dialog/system-manage/week-check-manage/register-report-table';
    import ReceiveCheck from 'dialog/system-manage/week-check-manage/receive-check-table';
    export default {
        name: 'WeekCheckManage',
        components: {
            'jt-table-column-filter': JtTableColumnFilter,
            'choose-user': ChooseUser,
            'register-report': RegisterReport,
            'receive-check': ReceiveCheck
        },
        data(){
            return {
                note: '',
                isOn: 'ON',
                notedate: '',
                checked: true,
                account: '',
                showUser: false,    // 选择用户
                showRegister: false,    // 登记报告人员表
                showReceive: false      // 接受周检人员表
            }
        },
        methods: {
            // 系统是否自动下发周检通知
            changNote(val) {
                if(val){
                    this.isOn = "ON";
                }else{
                    this.isOn = "OFF";
                }
            },
            // 设置通知下发时间
            setNoteDate() {
                this.$alert('设置成功！', '提示', {
                    confirmButtonText: '确定'
                });
                this.$alert('设置日期必须是XXXX-XX-XX之后！', '提示', {
                    confirmButtonText: '确定',
                    type: 'warning'
                });
            },
            // 设置下发账户
            setUser() {
                this.showUser = true;
            },
            // 设置下发账户
            chooseAccount(...data) {
                this.account = data.toString();
            },
            // 登记报告人员逻辑表
            tableRegister() {
                this.showRegister = true;
            },
            // 接受周检人员记录表
            tableReceive() {
                this.showReceive = true;
            }
        }
    }
</script>